<template>
    <div id="">
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home/welcome' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-card class="box-card" style="margin-top:20px">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-edit-outline"></i>&nbsp;操作面板</span>
                    <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-edit"></i>
                        新增商家</el-button>
                </div>
                <!-- 关键字搜索框 -->
                <div class="demo-input-suffix">
                    <el-input placeholder="请输入用户名称/邮箱" prefix-icon="el-icon-search" v-model="searchForm.keywords"
                        maxlength="20" show-word-limit style="width:200px" size="small">
                    </el-input>
                    <el-button type="primary" icon="el-icon-search" style="margin-left:10px" size="small"
                        @click="loadData">搜索</el-button>
                </div>
                <template>
                    <el-table :data="tableData" stripe style="width: 100%;margin-top:20px;">
                        <el-table-column prop="u_id" label="用户编号" width="250" align="center">
                        </el-table-column>
                        <el-table-column prop="u_head_photo" label="用户头像" width="250" align="center">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.u_head_photo" style="width:80px;height:60px"
                                    fit="contain"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="u_name" label="用户姓名" width="240" align="center">
                        </el-table-column>
                        <el-table-column prop="u_email" label="用户邮箱" width="250" align="center">
                        </el-table-column>
                        <el-table-column label="操作" width="250" align="center">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleClick(scope.row)" type="danger"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class="page-box" style="text-align:right">
                    <el-pagination background layout="prev, pager, next" :total="total" :page-count="5"
                        :page-size="pageSize" @current-change="currentChange" @prev-click="prevClick"
                        @next-click="nextClick">
                    </el-pagination>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {

    data() {
        return {
            searchForm: {
                keywords: ""
            },
            page: 1,//当前页码
            pageSize: 4,//每页显示条数
            total: 0,
            tableData: []
        }
    },
    methods: {
        loadData() {
            // 校验搜索关键字
            let keywords = this.searchForm.keywords.trim()
            console.log(keywords);
            if (!keywords) {
                keywords = "''"
            }
            // 封装请求路径
            let url = `${this.$api.userGet}/${this.page}/${this.pageSize}/${keywords}`
            // if (keywords && keywords.length > 0) {
            //     url += `&&keywords=${keywords}`
            // }
            console.log(url);
            // 请求后端
            this.$axios.get(url).then(res => {
                console.log(res);
                if (res?.data.code == 200) {
                    this.page = res?.data?.data?.page
                    this.pageSize = res?.data?.data?.pageSize
                    this.total = res?.data?.data?.total
                    this.tableData = res?.data?.data?.result1
                }
                console.log(this.total);
            }).catch(err => {
                console.log(err);
            })
        },
        currentChange(row) {
            console.log("currentChange" + row);
            this.page = row
            this.loadData()
        },
        prevClick(row) {
            console.log("prevClick" + row);
        },
        nextClick(row) {
            console.log("nextClick" + row);
        },
        handleClick(row) {
            const { u_id } = row
            this.$confirm('是否确认删除该条用户信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除实现
                let url = `${this.$api.userdelete}/${u_id}`
                this.$axios.delete(url).then(res => {
                    console.log(res);
                    // token失效
                    if (res?.code === 202) {
                        this.$message.error(res?.msg)
                        this.$router.replace("/login")
                    }
                    if (res?.data?.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // 删除成功,更新表格数据
                        this.loadData()
                    } else {
                        this.$message.error(res?.data?.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '删除失败'
                });
            });
        }
    },
    async mounted() {
        await this.loadData()
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}
</style>
